<template>
  <div>
    <!-- 搜索活动信息的搜索栏 -->
    <el-input v-model="nameOrAccount" placeholder="请输入活动名称或活动发起人名"></el-input>
    <el-button size="small" type="primary" :disabled="isLock" @click="search()">搜索</el-button>
    <!-- 新增活动按钮 -->
    <el-button v-if="isTeacher" size="small" type="success" @click="dialogVisible=true">新增</el-button>
    <div>
      <el-table
          row-key="id"
          height="80vh"
          :data="activityMessage"
          border style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">

        <el-table-column prop="activityName" label="活动名称" width="300"/>
        <el-table-column prop="activityContent" label="活动内容" width="500"/>
        <el-table-column prop="activityAddress" label="活动地点" width="150"/>
        <el-table-column prop="activityTime" label="活动开始时间" width="180"/>
        <el-table-column prop="activityPerson" label="发起人员" width="120" />
        <el-table-column prop="studentNum" label="需要学生数量" width="120" />
        <el-table-column prop="enterStartTime" label="报名开始时间" width="120" />
        <el-table-column prop="enterEndTime" label="报名结束时间" width="120" />
        <el-table-column align="center"  prop="operate" label="操作" width="250">
          <template v-slot="scope">
            <div  v-if="scope.row.state==='0'">
              <el-tag>
                报名未开始
              </el-tag>
              <el-button
                  size="small"
                  type="primary" icon="Edit"
                  @click="deleteEntry(scope.row)"
                  v-if="this.isTeacher"
              >删除
              </el-button>
            </div>
            <div v-if="scope.row.state==='1'&&!this.isTeacher">
              <el-button
                  size="small"
                  type="primary" icon="Edit"
                  @click="signInDialog(scope)"
                  v-if="!this.isSign(scope)"
              >报名
              </el-button>
              <el-button
                  size="small"
                  type="primary" icon="Edit"
                  @click="unSignInDialog(scope)"
                  v-if="this.isSign(scope)"
              >取消报名
              </el-button>
            </div>
              <div v-if="scope.row.state==='1'">
                  <el-button
                          size="small"
                          type="primary"
                          icon="Edit"
                          @click="this.detialdialogVisible = true; lookOnSubmit(scope.row)"
                          v-if="this.isTeacher"
                  >查看当前报名详情
                  </el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          small
          :pager-count="5"
          :page-sizes="[50, 100 , 200 , 500,1000,2000,5000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

<!--    新增弹窗-->
    <el-dialog title="活动操作" v-model="this.dialogVisible" width="30%">
      <el-form :model="this.activity" :rules="rules" ref="activity">
        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model="this.activity.activityName"></el-input>
        </el-form-item>
        <el-form-item label="活动内容" prop="activityContent">
          <el-input v-model="this.activity.activityContent"></el-input>
        </el-form-item>
        <el-form-item label="活动地点" prop="activityAddress">
          <el-input v-model="this.activity.activityAddress"></el-input>
        </el-form-item>
        <el-form-item label="活动开始时间" prop="activityTime">
            <el-date-picker
                    v-model="this.activity.activityTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择开始日期时间"
                    :editable="false">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="需要学生数" prop="studentNum">
          <el-input v-model="this.activity.studentNum"></el-input>
        </el-form-item>
        <el-form-item label="报名开始时间" prop="enterStartTime">
            <el-date-picker
                    v-model="this.activity.enterStartTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择结束日期时间"
                    :editable="false">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="报名结束时间" prop="enterEndTime">
            <el-date-picker
                    v-model="this.activity.enterEndTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择结束日期时间"
                    :editable="false">
            </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('activity')">取 消</el-button>
        <el-button type="primary" @click="confirmChange('activity')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
  <!--    查看详情弹窗-->
  <el-dialog
      v-model="detialdialogVisible"
      :close-on-click-modal="false"
      width="500px"
      height="700px"
      close-on-press-escape
      align-center
      draggable>
    <el-descriptions
        class="margin-top"
        title="查看详情"
        :column="1"
        border>
      <el-descriptions-item
          width="1px">
        <template #label>
          <div class="cell-item">
            活动名
          </div>
        </template>
        {{ this.activity.activityName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            活动内容
          </div>
        </template>
        {{ this.activity.activityContent }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            所需学生数
          </div>
        </template>
        {{ this.activity.studentNum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            开始时间
          </div>
        </template>
        {{ this.activity.enterStartTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            结束时间
          </div>
        </template>
        {{ this.activity.enterEndTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            活动时间
          </div>
        </template>
        {{ this.activity.activityTime }}
      </el-descriptions-item>
    </el-descriptions>
    <el-form-item>
      <el-button type="primary" @click="this.getEnterData()">打印报名表</el-button>
    </el-form-item>
  </el-dialog>
  <el-dialog
      v-model="detailedInformation"
      :close-on-click-modal="false"
      title="报名信息"
      width="850px">
    <Activity v-if="detailedInformation" ref="dialog"/>
  </el-dialog>
</template>

<script>
import request from "@/util/request.js";
import {activity} from "@/util/permissionJudgment.js";
import {ACTIVITY, PHOTO_MANAGE} from "@/util/config.js";
import Activity from "@/template/Activity.vue";
export default {
  components: {Activity},
  data() {
    return {
      dialogVisible: false,// 新增弹窗显示
      detialdialogVisible: false,//详情弹窗
      activity: {studentNum: 0},        // 活动信息
      activityMessage: [],
      nameOrAccount: "",
      pageNum: 1, //页码
      pageSize: 50,  //页长
      total: 0,  //总表长
      rules: {
        activityName: [
          {required: true, trigger: 'blur', message: "活动名称不能为空"}
        ],
        activityContent: [
          {required: true, trigger: 'blur', message: "活动内容不能为空"}
        ],
        studentNum: [
          {required: true, trigger: 'blur', message: "需要学生数量不能为空"}
        ],
        enterStartTime: [
          {required: true, trigger: 'blur', message: "报名开始时间不能为空"}
        ],
        enterEndTime: [
          {required: true, trigger: 'blur', message: "报名结束时间不能为空"}
        ],
        activityTime: [
          {required: true, trigger: 'blur', message: "活动开始时间不能为空"}
        ],
        activityAddress: [
          {required: true, trigger: 'blur', message: "活动地点不能为空"}
        ],
      },
      roleNo: [], // 能否对活动进行管理
      activityState:"",  // 活动状态
      signInMessage:{},  // 报名
      isLock:false,      // 放重复点击
      enterData: [],   // 报名表信息
      detailedInformation: false,// 报名表弹窗
    };
  },
  //初始化加载
  created() {
    this.getAllActivity()
    this.setRoleNo()
    this.isTeacher()
  },
  mounted() {

  },
  methods: {
    getEnterData() {
      request.get("/info_activity_massage/getOneActivityStudentMassage?activityNo=" + this.activity.activityNo).then(res => {
        this.detailedInformation = true
        this.enterData = res.data
        window.getTemplateData = (callback) => {
          this.getTemplateData(callback);
        }
      })
    },
    getTemplateData(callback) {
      callback(this.enterData);
    }, //获取文书数据
    isTeacher() {
      for (let item of this.roleNo) {
        if (ACTIVITY.includes(item)) {
          return true
        }
      }
      return false
    },
      deleteEntry(row) {
        // 获取要删除的通知的 ID
        const id = row.id; // 使用传入的 row 参数获取通知的 ID
        this.$confirm('此操作将永久删除该通知, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确认删除，向服务器发送请求
          request.get(`/info_activity/delete/${id}`)
              .then(() => {
                // 删除成功，重新获取数据
                this.getAllActivity();
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              })
        })
      },
    setRoleNo() {
      if (JSON.parse(localStorage.getItem("user")).roleNo.includes(",")) {
        this.roleNo = JSON.parse(localStorage.getItem("user"))["roleNo"].split(',')
      } else {
        this.roleNo.push(JSON.parse(localStorage.getItem("user"))["roleNo"])
      }
    },
    search(){
      // 放重复搜索
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 15000)
      this.getAllActivity()
    },
    // 获取所有活动
    getAllActivity(){
      request.get("/info_activity/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&activityName=" + this.nameOrAccount + "&activityPerson=" + this.nameOrAccount).then(res => {
        if (res.data.code === '200') {
          for (let key in res.data.data) {
            if (key === "records") {
              this.activityMessage = res.data.data[key];
            } else if (key === "total") {
              this.total = res.data.data[key];
            }
          }
        } else {
          this.$message({
            type: 'error',
            message: '服务端错误',
            center: true,
          })
        }
      })
    },
    // 新增活动提交
    confirmChange(activity){
      this.activity.accountNo=JSON.parse(localStorage.getItem('user')).accountNo;
      this.$refs[activity].validate((valid) => {
        if (valid) {
          request.post("/info_activity/edit", this.activity).then(res => {
            this.dialogVisible = false
            this.activity = {}
            if (res.data.code === "200") { // 新增成功
              this.$message({
                type: 'success',
                message: '新增成功',
                center: true,
              })
            } else {
              this.$message({
                type: 'error',
                message: '新增失败',
                center: true,
              })
            }
            location.reload();
          })
        }
      })
    },
    // 报名活动确认弹窗
    signInDialog(scope){
      this.$messageBox({
        title: '确定报名',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.signInMessage.accountNo = JSON.parse(localStorage.getItem('user')).accountNo;
        this.signInMessage.activityNo=scope.row.activityNo;
        this.signIn()
      })
    },
    // 活动报名
    signIn(){
      request.post("/info_activity_massage/edit",this.signInMessage).then(res=>{
        if (res.data.code==='200'){
          this.$message({
            type: 'success',
            message: '报名成功',
            center: true,
          })
        }else {
          this.$message({
            type: 'error',
            message: '报名失败',
            center: true,
          })
        }
        location.reload()
      })
    },
    // 取消报名弹窗
    unSignInDialog(scope){
      this.$messageBox({
        title: '确定取消报名',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.unSignIn(scope)
      })
    },
    // 取消报名
    unSignIn(scope){
      request.get("/info_activity_massage/delete?activityNo="+scope.row.activityNo+"&accountNo="+JSON.parse(localStorage.getItem('user')).accountNo).then(res=>{
        if (res.data.code==='200'){
          this.$message({
            type: 'success',
            message: '取消成功',
            center: true,
          })
        }else {
          this.$message({
            type: 'error',
            message: '取消',
            center: true,
          })
        }
        location.reload()
      })
    },
    // 表单清空
    resetForm(activity) {
      this.dialogVisible = false;
      this.activity={}
      this.$refs[activity].resetFields();
    },
    // 活动是否报名判断
    isSign(scope){
      request.get("/info_activity_massage/isSign?activityNo="+scope.row.activityNo+"&accountNo="+JSON.parse(localStorage.getItem('user')).accountNo).then(res=>{
        return res.data.data
      })
    },
    //表尾分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllNoticeType();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllNoticeType();
    },
    // 回显
    lookOnSubmit(scope) {
      this.activity = [];
      this.activity = scope
    },
  }
};

</script>


<style scoped>

</style>
